import React, { useState, useEffect } from 'react'
import { NavBar, Sticky } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from "react-router-dom"

export default function Price() {
    const [currentTime, setCurrentTime] = useState(getCurrentTime())
    const [numlist, setNumlist] = useState([
        { id: 1, num: "10" },
        { id: 2, num: "20" },
        { id: 3, num: "30" },
        { id: 4, num: "40" },
        { id: 5, num: "50" },
        { id: 6, num: "60" },
        { id: 7, num: "70" },
        { id: 8, num: "80" },
    ])
    const [i, setI] = useState(0)
    let navigate = useNavigate()
    function getCurrentTime() {
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        minutes = (minutes < 10 ? '0' : '') + minutes;
        return `${hours}:${minutes}`;
    }

    useEffect(() => {
        const intervalId = setInterval(() => {
            setCurrentTime(getCurrentTime());
        }, 3000);
        return () => clearInterval(intervalId);
    }, []);

    let idset = (id) => {
        setI(id)
    }
    return (
        <div style={{ backgroundColor: "#F2F2F2", width:"100vw", height: "100vh" ,overflow:"hidden"}}>
            <Sticky threshold={0} position='top'>
                <div style={{ backgroundColor: "white", width: "100%", height: "46px", lineHeight: "46px", top: 0 }}>
                    <p style={{ float: "left", fontSize: "18px", position: "relative", left: "15px", top: "0px" }}>{currentTime}</p>
                    <span style={{ float: "right", marginRight: "14px", marginTop: "2px" }}>
                        <svg style={{ margin: "0px 2px" }} t="1721620058419" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10971" width="18" height="18"><path d="M0 704h208v192H0zM272 512h208v384H272zM544 288h208v608H544zM816 128h208v768H816z" p-id="10972" fill="#2c2c2c"></path></svg>
                        <svg style={{ margin: "0px 2px" }} t="1721619897930" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2615" width="18" height="18"><path d="M0 352.832l93.12 98.752c231.296-245.44 606.464-245.44 837.76 0L1024 352.832C741.44 53.056 283.008 53.056 0 352.832z m372.352 395.008L512 896l139.648-148.16c-76.8-81.92-202.048-81.92-279.296 0zM186.24 550.4l93.12 98.752c128.448-136.32 336.96-136.32 465.408 0L837.824 550.4c-179.648-190.592-471.488-190.592-651.648 0z" fill="#000000" p-id="2616"></path></svg>
                        <svg style={{ position: "relative", top: "2px" }} t="1721620142022" className="icon newdc" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12310" width="25" height="25"><path d="M167.4 374.1h620.3v275.7H167.4z" p-id="12311" fill="#2c2c2c"></path><path d="M930.1 408.6H891V305.2c0-19-15.5-34.5-34.5-34.5h-758c-18.9 0-34.5 15.5-34.5 34.5v413.5c0 18.9 15.5 34.5 34.5 34.5h758.2c18.9 0 34.5-15.5 34.5-34.5V615.4h39.1c16.5 0 29.9-13.4 29.9-29.9v-147c-0.2-16.4-13.6-29.9-30.1-29.9zM822.2 684.3H132.9V339.7h689.2v344.6z" p-id="12312" fill="#2c2c2c"></path></svg>
                    </span>
                </div>
                <div style={{ position: "relative", top: -15, }}>
                    <div style={{ width: "414px" }}>
                        <NavBar style={{ width: "100%", marginTop: "-50px", backgroundColor: "white", }}
                            titleAlign="left"
                            back={<ArrowLeft />}
                            onBackClick={() => { navigate(-1) }}>
                            <div >预约人数</div>
                        </NavBar>
                    </div>
                </div>
            </Sticky>
            <hr style={{ marginTop: "-60px" }}></hr>
            <div style={{ backgroundColor: "#FFFFFF", height: "150px", marginTop: "-10px" }}>
                <div style={{ marginLeft: "20px" }}>
                    <span>选择人数</span>
                </div>
                <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
                    {
                        numlist.map(item => (
                            <button key={item.id} className={item.id == i ? "active" : "b"} onClick={() => { idset(item.id) }}>{item.num}</button>
                        ))
                    }
                </div>
            </div>
            <div style={{ backgroundColor: "#FFFFFF", marginTop: "10px", height: "180px" }}>
                <div style={{ marginLeft: "20px" }}>
                    <span>自定义</span>
                    <div style={{ marginLeft: "5px", marginTop: "30px" }}>
                        <input style={{ width: "300px", height: "40px", border: "1px solid #DADADA" }} type='text' placeholder='请输入人数'></input>
                    </div>
                </div>
            </div>
            <div style={{ textAlign: "center" }}>
                <button style={{ width: "400px", height: "45px", border: "0px", backgroundColor: "#108EE9", color: "white", marginTop: "50px" }} onClick={() => { navigate("/servset") }}>确定</button>
            </div>
        </div>
    )
}